<template>
	<view class="content">
		<view class="latex" @click="open">
			<img :src="imgSrc" v-if="latex" alt="" mode="heightFix" :style="{height: imgHeight}">
			<text v-else>点击输入</text>
		</view>
		<text>{{latex}}</text>
		<view class="webview" v-if="webviewShow">
			<web-view :src="url" @message="postMessage"></web-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				url: '/hybrid/html/math-keboard/index.html',
				webviewShow: false,
				imgSrc:'',
				imgHeight:'',
				latex:'',
			}
		},
		onLoad() {

		},
		methods: {
			open(){
				console.log(getApp())
				this.url = '/hybrid/html/math-keboard/index.html?latex=' + this.latex;
				this.webviewShow = true;
				this.setWebviewStyle()
			},
			postMessage(e){
				let data = e.detail.data[0].message;
				let type = e.detail.data[0].type;
				console.log('data',e.detail.data)
				//const data = msg?.data?.body;
				switch (type) {
					case 'deleteEvent': // 删除
					case 'inputEvent': // 输入
						this.imgSrc = data.latexImg
						this.latex = data.latex
						this.imgHeight = data.imgHeight
						break;
					case 'subEvent':// 完成
						this.webviewShow = false
						break
				}
			},
			setWebviewStyle(){
				const sysInfo = uni.getSystemInfoSync();
				let width = uni.upx2px(750);
				let height = 282;
				let styles = {
					left:0,
					width: width,
					height: height,
					// 如果有tabbar 需要减去50
					top: sysInfo.screenHeight - height,
				};
				const currentWebview = this.$scope.$getAppWebview();
				setTimeout(function () {
					const wv = currentWebview.children()[0]
					wv.setStyle(styles);
				},100);
			}
		}
	}
</script>

<style>
	.content{
		height: 100%;
		width: 750upx;
	}
	.latex{
		width: 750upx;
		height: 100px;
	}
	.webview{
		position: fixed;
		bottom: 0;
		height: 400rpx;
		left: 0;
		width: 100%;
		overflow: hidden;
		animation: webview 2s linear forwards;
		z-index: 999999999;
	}
</style>
